<template>
  <!-- 空运列表 -->
  <customContainer ref="mainConfig" :config="config" />
  <commonBtns
    ref="commonBtnsRef" 
    :statuss="statuss"
    :idss="idss"
    :load-nos="loadNos"
    :transport-type="transportType"
    @success="success"
  />
</template>
<script lang="ts" setup>
import { ref, computed, defineAsyncComponent, getCurrentInstance } from 'vue'
import { ElButton, ElDivider } from 'element-plus'
import { selectAirOrderInfo } from '@/api/expressManager/flySea'
import { DictDirection } from '@/store/modules/dicts'

const SelfDropdown = defineAsyncComponent(() => import('../components/SelfDropdown.vue'))
// 海运 运输类型
const transportType = ref(5)

const commonBtnsRef = ref(null)
const commonBtns = defineAsyncComponent(() => import('../components/commonBtns.vue'))

const single = ref(true),
  multiple = ref(true)

const mainConfig = ref(null)

const {
  appContext: {
    config: {
      globalProperties: { $download },
    },
  },
} = getCurrentInstance()

const success = () => {
  mainConfig.value.getList()
}

const handleExport1 = () => {
  $download('/order/airOrderInfo/export/order/info', {}, `空运委托书_${ new Date().getTime() }.xlsx`)
}

const handleExportPower = () => {
  $download(`/order/airOrderInfo/export_templeate/${ idss.value[0] }`, {}, `海运委托书_${ new Date().getTime() }.xlsx`)
}
const idss = ref([])
const loadNos = ref([])
const statuss = ref([])
const caseNos = ref([])

const handleTableSelect = (rows: { [key: string]: any }[]) => {
  single.value = rows.length != 1
  multiple.value = !rows.length
  
  caseNos.value = rows.map((item) => item.caseNo)
  statuss.value = rows.map((item) => item.status)
  idss.value = rows.map((item) => item.id)
  loadNos.value = rows.map((item) => item.ladingNo)
}
// 下拉菜单方法调用
const selfDropdownFn = (fnName) => (row) => {
  commonBtnsRef.value[fnName](row)
}

const queryParams = ref({
  pageSize: 10,
  pageNum: 1,
  clientId: undefined,
  ladingNo: undefined,
  orderNo: undefined,
  waybillNo: undefined,
  mainTransferOrderNo: undefined,
  transportType: transportType.value,
  productType: undefined,
  customerCode: undefined,
  areaCode: undefined,
  receivingSite: undefined,
  marketProducts: undefined,
  goodsType: undefined,
  isPod: undefined,
  businessManager: undefined,
  consigneeCountry: undefined,
  consigneePostcode: undefined,
  splittingStatus: undefined,
  maker: undefined,
  tagNumber: undefined,
  dataSources: undefined,
  pickingStatus: undefined,
})
const config = computed({
  get() {
    return {
      query: {
        fields: [
          {
            label: '客户订单号',
            prop: 'waybillNo',
            option: {
              placeholder: '请输入客户订单号',
              type: 'textarea',
            },
          },
          {
            label: '提单号',
            prop: 'ladingNo',
            option: {
              placeholder: '请输入提单号',
              type: 'textarea',
            },
          },
          {
            type: 'select',
            label: '服务商',
            prop: 'providerServiceCode',
            option: {
              placeholder: '请输入服务商',
              dictInfo: { dict: DictDirection.服务商 },
            },
          },
          {
            type: 'select',
            label: '委托单位',
            prop: 'customerCode',
            option: {
              dictInfo: { dict: DictDirection.客户 },
            },
          },
          {
            label: '航班号',
            prop: 'flightNumber',
            option: {
              placeholder: '请输入航班号',
             
            },
          },
          {
            label: '起运港',
            prop: 'portOfDeparture',
            option: {
              placeholder: '请输入起运港',
             
            },
          },
          {
            label: '目的港',
            prop: 'portOfDestination',
            option: {
              placeholder: '请输入目的港',
             
            },
          },
          
          {
            type: 'date-picker',
            label: '起飞时间',
            prop: 'datePicker',
            option: {
              type: 'date',
            },
          },
          {
            label: '航空公司',
            prop: 'airlineCompany',
          },
          {
            type: 'select',
            label: '订单状态',
            prop: 'status',
            option: {
              dictInfo: { dict: DictDirection.包裹状态 },
            },
          },
      
        ],
        queryParams: queryParams.value,
        formOption: {},
      },
      btns: [
        {
          title: '国内查验',
          disabled: multiple.value,
          type: 'primary',
          onClick: () => commonBtnsRef.value.handleInspection(),
        },
        {
          title: '国内报关',
          type: 'primary',
          disabled: multiple.value,
          onClick: () => commonBtnsRef.value.handleDeclaration(),
        },

        {
          title: '国内已放行',
          type: 'primary',
          disabled: multiple.value,
          onClick: () => commonBtnsRef.value.handleDomestically(),
        },
        {
          title: '已到港',
          type: 'primary',
          disabled: multiple.value,
          onClick: () => commonBtnsRef.value.handleArrived(),
        },
        {
          title: '国外查验',
          type: 'primary',
          disabled: multiple.value,
          onClick: () => commonBtnsRef.value.handleForeignInspection(),
        },
        {
          title: '国外清关',
          type: 'primary',
          disabled: multiple.value,
          onClick: () => commonBtnsRef.value.customsClearanceFn(),
        },
        {
          title: '国外清关已放行',
          disabled: single.value,
          type: 'primary',
          onClick: () => commonBtnsRef.value.handleCustomsClearance(),
        },

        {
          title: '已提柜',
          disabled: multiple.value,
          type: 'primary',
          onClick: () => commonBtnsRef.value.handleCarryCabinet(),
        },
        {
          title: '提重柜',
          type: 'primary',
          disabled: multiple.value,
          onClick: () => commonBtnsRef.value.handleUps(),
        },
        {
          title: '还空柜',
          type: 'primary',
          disabled: multiple.value,
          onClick: () => commonBtnsRef.value.handleOverseas(),
        },
        {
          title: '导出',
          type: 'primary',
          onClick: handleExport1,
        },
        {
          title: '海运导出委托书',
          type: 'primary',
          disabled: single.value,
          onClick: handleExportPower,
        },
      ],
      table: {
        columns: [
          { type: 'selection', width: '55', align: 'center' },
          { label: '提单号', width: '125', align: 'center', prop: 'ladingNo' },
          { label: '报价编号', align: 'center', width: '100', prop: 'quotationNo' },
          { label: '委托单位', align: 'center', width: '100', prop: 'customerName' },
          { label: '客户单号', width: '120', align: 'center', prop: 'waybillNo' },
          { label: '贸易条款', align: 'center', prop: 'tradeTerms' },
          { label: '服务类型', width: '100', align: 'center', prop: 'serviceType' },
          { label: '服务商简称',
            align: 'center',
            width: '150',
            prop: 'providerServiceCode',
            autoFormatter: {
              dict: DictDirection.服务商,
              rowKey: 'providerServiceCode',
            },
          },
          { label: '服务渠道',
            align: 'center',
            width: '150',
            prop: 'serviceChannelCode',
            autoFormatter: {
              dict: DictDirection.服务渠道,
              rowKey: 'serviceChannelCode',
            } },
          { label: '状态',
            align: 'center',
            prop: 'status',
            width: '120',
            autoFormatter: {
              dict: DictDirection.包裹状态,
              rowKey: 'status',
            },
          },
          { label: '运输类型',
            align: 'center',
            prop: 'transportType',
            formatter(row) {
              const dicts = {
                3: '空运',
                5: '海运',
              }
              return dicts[row.transportType]
            },
            width: '120' },
          { label: '订舱管理', align: 'center', prop: 'bookingManagement', width: '180' },
          { label: '国外代理', align: 'center', width: '100', prop: 'foreignAgent' },
          { label: '航空公司', align: 'center', prop: 'airlineCompany' },
          { label: '货值', align: 'center', prop: 'valueGoods', width: '100' },
          { label: 'classNo号', width: '100', align: 'center', prop: 'classno' },
          { label: '起飞时间', width: '120', align: 'center', prop: 'departureTime' },
          { label: '预计排仓时间', width: '120', align: 'center', prop: 'estimatedArrangementTime' },
          { label: '起运港', align: 'center', prop: 'portOfDeparture' },
          { label: '目的港', align: 'center', width: '120', prop: 'portOfDestination' },
          { label: '卸货港', align: 'center', width: '120', prop: 'portOfDischarge' },
          { label: '中转港代码', align: 'center', prop: 'transitPortCode', width: '120' },
          { label: '主单号', align: 'center', prop: 'masterOrderNo', width: '120' },
          { label: '分单号', align: 'center', prop: 'subOrderNo', width: '120' },
          { label: '航班号', align: 'center', prop: 'flightNumber', width: '120' },
          { label: 'ETD', align: 'center', prop: 'etd', width: '120' },
          { label: '截单时间', align: 'center', prop: 'cutOffTime', width: '120' },
          { label: '发货人', align: 'center', prop: 'consignor', width: '120' },
          { label: '收货人', align: 'center', prop: 'consignee', width: '120' },
          { label: '通知人1', align: 'center', prop: 'notifier1', width: '120' },
          { label: '通知人2', align: 'center', prop: 'notifier2', width: '120' },
          { label: '唛头', align: 'center', prop: 'shippingMark', width: '120' },
          { label: '英文品名', align: 'center', prop: 'englishName', width: '120' },
          { label: '付款方式', align: 'center', prop: 'paymentMethod', width: '120' },
          { label: '运输条款', align: 'center', prop: 'transportClause', width: '120' },
          { label: '提单形式', align: 'center', prop: 'ladingForm', width: '120' },
          { label: '总件数', align: 'center', prop: 'receivingTotal', width: '120' },
          { label: '总实重', align: 'center', prop: 'receivingTotalWeight', width: '120' },
          { label: '总材积重', align: 'center', prop: 'totalVolumeSquare', width: '120' },
          { label: '总体积重', align: 'center', prop: 'receivingTotalWood', width: '120' },
          { label: '总计费重', align: 'center', prop: 'receivingTotalCharging', width: '120' },
          { label: '订舱备注', align: 'center', prop: 'bookingRemarks', width: '120' },
          { label: '配舱备注', align: 'center', prop: 'cabinRemarks', width: '120' },
          { label: '操作备注', align: 'center', prop: 'operationRemarks', width: '120' },
          { label: '创建人', align: 'center', prop: 'createUser', width: '120' },
          { label: '创建时间', align: 'center', prop: 'createDate', width: '120' },
          { label: '业务员', align: 'center', prop: 'salesman', width: '120' },
          { label: '客服员', align: 'center', prop: 'customerServiceStaff', width: '120' },
          {
            label: '操作',
            width: '252px',
            fixed: 'right',
            align: 'center',
            render(h, params) {
              // // 海运多出按钮
              const seaBtn = [{
                label: '导出账单',
                clickFun: selfDropdownFn('ExportBillHandler'),
              },
              {
                label: '上传下载文件',
                clickFun: selfDropdownFn('uploadingHandler'),
              },
              ]
              return [
                h(
                  ElButton,
                  {
                    text: true,
                    type: 'primary',
                    onClick: () => {
                      commonBtnsRef.value.tofee(params.row)
                    },
                  },
                  {
                    default: () => '应收费',
                  },
                ),
                h(
                  ElDivider,
                  { direction: 'vertical' },
                ),
                h(
                  ElButton,
                  {
                    text: true,
                    type: 'primary',
                    // icon: el.icon,
                    onClick: () => {
                      commonBtnsRef.value.toPay(params.row)
                    },
                  },
                  {
                    default: () => '应付费',
                  },
                ),
                h(
                  ElDivider,
                  { direction: 'vertical' },
                ),
                h(
                  SelfDropdown,
                  {
                    items: [
                      { label: '详情', clickFun: selfDropdownFn('handleRouterPush') },
                      ...seaBtn,
                      { label: '配舱', disabled: params.row.status !== 4, clickFun: selfDropdownFn('handleCabin') },
                      { label: '修改', clickFun: selfDropdownFn('handleEdit') },
                      { label: '签出', disabled: params.row.status !== 4, clickFun: selfDropdownFn('handleAddTotalOrder') },
                      { label: '删除', disabled: params.row.status !== 4, clickFun: selfDropdownFn('handleDelete') },
                    ],
                    onHandleCommand(command) {
                      command.clickFun && command.clickFun(params.row)
                    },
                  },
                ),
              ]
            },
          },
        ],
        event: {
          onSelectionChange: (rows) => {
            handleTableSelect(rows)
          },
        },
      },
      api: selectAirOrderInfo,
      customKey: 'express/mainBusiness/airSeaManage/air/index.vue',
    }
  },
  set(val) {
    return val
  },
  // customKey: 'express-orderInfo',
})
</script>
<style lang="less" scoped>
/deep/.is-guttered {
  padding: 5px;
}
</style>
